const spans = document.querySelectorAll(".right>span")
const w = document.querySelector(".w")
const tui= document.querySelector(".tui")
const cssArr = [
    {
        name: "CSSbutton按钮",
        href: "https://cssbuttongenerator.com/",
        text:""
    }, {
        name: "自定义圆角",
        href: "https://9elements.github.io/fancy-border-radius/",
        text:""
    }, {
        name: "平滑阴影",
        href: "https://shadows.brumm.af/",
        text:""
    }, {
        name: "阴影生成器",
        href: "https://neumorphism.io/#e0e0e0",
        text:""
    }, {
        name: "css代码整理",
        href: "https://tool.lu/css/",
        text:""
    }, {
        name: "自定义渐变",
        href: "https://cssgradient.io/",
        text:""
    }, {
        name: "自定义表格",
        href: "https://cssgrid-generator.netlify.app/",
        text:""
    }, {
        name: "过渡动画",
        href: "https://www.transition.style/#in:custom:circle-swoop",
        text:""
    }, {
        name: "加载动画",
        href: "https://loading.io/",
        text:""
    }, {
        name: "波浪线随机生成",
        href: "https://getwaves.io/",
        text:""
    }, {
        name: "我能用这个css样式吗  ",
        href: "https://caniuse.com/",
        text:""
    }, {
        name: "Grid网格在线拖拽布局",
        href: "https://www.lingdaima.com/grid/",
        text:""
    }, {
        name: "Table布局Excel转HTML",
        href: "https://www.lingdaima.com/table/",
        text:""
    }, {
        name: "生成CSS阴影效果",
        href: "https://www.lingdaima.com/shadow/",
        text:""
    }, {
        name: "新拟态风格盒子",
        href: "https://www.lingdaima.com/xinnitai/",
        text:"在线生成CSS新拟态风格效果国外超过的新拟态风格"
    }, {
        name: "CSS玻璃形态效果",
        href: "https://www.lingdaima.com/glass/",
        text:"在线生成CSS玻璃形态效果在线制作玻璃形态效果实时预览"
    }, {
        name: "CSS按钮设计",
        href: "https://www.lingdaima.com/cssbutton",
        text:"CSS按钮在线设计在线设计按钮样式并实时预览效果"
    }, {
        name: "css代码排版",
        href: "https://www.lingdaima.com/typeset",
        text:"CSS文本排版工具可视化对文本排版并生成CSS代码"
    }, {
        name: "CSS背景生成器",
        href: "https://www.lingdaima.com/cssbg/",
        text:"以像素为单位绘制任何CSS背景 "
    }, {
        name: "SVG波浪背景",
        href: "https://www.lingdaima.com/svgwave/",
        text:"背景生成器快速制作波浪背景"
    }, {
        name: "CSS精美样式库",
        href: "https://www.lingdaima.com/css/",
        text:"持续更新各种按钮、卡片等网页精美样式"
    }, {
        name: " css技巧",
        href: " https://lhammer.cn/You-need-to-know-css/",
        text:""
    }, {
        name: "中国传统颜色",
        href: "http://www.2kil.com/",
        text:""
    }, {
        name: "好看的渐变色",
        href: "https://color.uisdc.com/gradient.html",
        text:""
    },
]
const kfArr=[
    {
        name:"在线ASCII码表",
        href:"https://www.fly63.com/tool/ascii/",
        text:"里面还有很多好玩的功能"
    },
    {
        name:"正则表达式调试工具",
        href:"https://c.runoob.com/front-end/854/",
        text:"里面还有画图工具svg工具等等"
    },{
        name:"BASE64/DES等等加密解密",
        href:"https://www.fly63.com/tool/cipher/",
        text:"给数据加密这个好用"
    },{
        name:"Unicode/url/utf8编码解码",
        href:"https://www.matools.com/code-convert-unicode",
        text:"给数据加密"
    },{
        name:"各种文档api",
        href:"https://www.matools.com/api",
        text:"万能的文档什么都有"
    },{
        name:"ip地址查询",
        href:"https://www.ipip.net/ip.html",
        text:"IP地址可以定位大概的位置偏差10公里"
    },{
        name:"HTTP接口测试",
        href:"https://www.fly63.com/php/http/",
        text:"在线工具"
    },{
        name:"uuid生成器",
        href:"https://www.zxgj.cn/g/uuid",
        text:"在线工具"
    },{
        name:"菜鸟工具箱",
        href:"https://c.runoob.com/",
        text:"贼多的工具"
    },{
        name:"代码对比工具",
        href:"https://www.fly63.com/tool/textdiff/",
        text:"感觉没什么用"
    },{
        name:"",
        href:"",
        text:""
    },{
        name:"",
        href:"",
        text:""
    },{
        name:"",
        href:"",
        text:""
    },{
        name:"",
        href:"",
        text:""
    },{
        name:"",
        href:"",
        text:""
    },{
        name:"",
        href:"",
        text:""
    },{
        name:"",
        href:"",
        text:""
    },{
        name:"",
        href:"",
        text:""
    },{
        name:"",
        href:"",
        text:""
    },{
        name:"",
        href:"",
        text:""
    },

]
const czArr=[
    {
        name:"git中文文档",
        href:"https://git-scm.com/book/zh/v2",
        text:""
    },{
        name:"vue中文文档",
        href:"https://cn.vuejs.org/",
        text:""
    },{
        name:"",
        href:"",
        text:""
    },{
        name:"",
        href:"",
        text:""
    },{
        name:"",
        href:"",
        text:""
    },{
        name:"",
        href:"",
        text:""
    },{
        name:"",
        href:"",
        text:""
    },{
        name:"",
        href:"",
        text:""
    },{
        name:"",
        href:"",
        text:""
    },{
        name:"",
        href:"",
        text:""
    },
]

const hsArr=[]
const zxArr=[]

let Arr=[]
Arr.push(...cssArr,...kfArr,...czArr,...hsArr,...zxArr)

//创建div
function createE(cssArr){

cssArr.forEach((item)=>{
    //    w.classList.add("cssDiv")
        const div=document.createElement("div")
        const A=document.createElement("a")
        const P=document.createElement("p")
        P.innerHTML=`${item.text}`
        A.innerHTML=`${item.name}`
        A.href=`${item.href}`
        div.append(P)
        div.append(A)
        w.append(div)
       
    })

}

document.querySelector(".right").addEventListener("click",function(e){
    tui.style.display="block"
    tui.style.animation ="jin 1s forwards"
    //清空div
    w.innerHTML=""
    //显示w
    w.style.display = "flex"
    w.style.animation = " 1.5s cubic-bezier(.25, 1, .30, 1) diamond-in-center both"
    if(e.target.innerText==="css工具"){
        //创建div
        createE(cssArr)
    }else if(e.target.innerText==="开发工具"){
        console.log("123123");
        createE(kfArr)
    }
    
})



tui.addEventListener("click",function(){
    w.style.animation = "1.5s cubic-bezier(.25, 1, .30, 1) diamond-out-center both"
    tui.style.animation ="tui 1s forwards"
    
    
})

w.addEventListener("mousemove",function(e){
console.dir(e.target);
    if(e.target.tagName=="A"){
        e.target.addEventListener("mouseleave",function(e){
     this.parentNode.childNodes[0].style.opacity=0

        })
     e.target.parentNode.childNodes[0].style.opacity=1
     
    }
   
})

//搜索框
document.querySelector(".center>input").addEventListener("input",function(e){
  
    // console.log(e,this.value);
    // if(/[\u4e00-\u9fa5]/.test(this.value)){
        document.querySelector(".text").innerHTML=""
       let Arrs= Arr.filter(item=>item.name.match(`.*${this.value}.*`) || false)
        console.log(Arrs);
        Arrs.forEach(item=>{
            const a =document.createElement("a")
            a.innerHTML=item.name
            a.href=item.href

    document.querySelector(".text").append(a)
    document.querySelector(".text").style.opacity=1

        })
       
   
    
  

})

//搜索框样式事件
document.querySelector(".center>input").addEventListener("focus",function(){
this.style.width="100%";

})
document.querySelector(".center>input").addEventListener("blur",function(e){
    this.style.width="25px";   
})

document.body.addEventListener("click",function(){
    document.querySelector(".text").innerHTML=""
})